<template>
  <div>
    <div id="shell">
      <div v-if="tickinfo.invoiceState && tickinfo.invoiceState !== '0'" class="shuiyin">
        <!-- 失控-1 -->
        <img v-if="tickinfo.invoiceState === '1'" :src="imgSK"/>
        <!-- 作废-2 -->
        <img v-if="tickinfo.invoiceState === '2'" :src="imgZF"/>
        <!-- 红冲-3 -->
        <img v-if="tickinfo.invoiceState === '3'" :src="imgHC"/>
        <!-- 异常-4 -->
        <img v-if="tickinfo.invoiceState === '4'" :src="imgYC"/>
      </div>

      <div class="ewm">
        <div id="qrimg">
          <canvas id="qrimg000"></canvas>
        </div>
      </div>

      <div class="title color1">
        <div class="titleTop">{{ fplxmc }}</div>
        <div class="hx1"></div>
        <div class="hx2"></div>
        <div class="titleBottom">发 票 联</div>
        <img class="yz" :src="imgZL" />
      </div>

      <!-- !isDzfp普通发票类型-->
      <div v-if="!isDzfp" class="topInfo">
        <div class="fpdm"  style="color:#6a7064;">{{ tickinfo.invoiceCode }}</div>
        <div class="fphm">
          <img style="height:32.22222222222222px;" :src="imgNO" />
          <div>{{ tickinfo.invoiceNo }}</div>
        </div>
        <div class="numbers">
          <div>{{ tickinfo.invoiceCode }}</div>
          <div>{{ tickinfo.invoiceNo }}</div>
        </div>
        <div class="date">
          <div>开票日期:</div>
          <div>{{ tickinfo.invoiceDate }}</div>
        </div>
        <!-- 专票隐藏校验码字段 -->
        <div class="jym" v-if="invoiceKindCode != '01'">
          <span>校验码:</span>
          <span>{{ getJym }}</span>
        </div>
      </div>

      <div v-if="isDzfp">
        <div class="jym">
          <span>机器编号:</span>
          <span>{{ tickinfo.machineNo }}</span>
        </div>
      </div>

      <div class="txf" v-if="invoiceKindCode == 14">通行费</div>

      <!-- isDzfp电子发票类型-->
      <div class="dzfp" v-if="isDzfp">
        <div>
          <span>发票代码:</span>
          <span>{{ tickinfo.invoiceCode }}</span>
        </div>
        <div>
          <span>发票号码:</span>
          <span>{{ tickinfo.invoiceNo }}</span>
        </div>
        <div>
          <span>开票日期:</span>
          <span>{{ tickinfo.invoiceDate }}</span>
        </div>
        <div>
          <span>校&nbsp;&nbsp;验&nbsp;&nbsp;码:</span>
          <span>{{ getJym }}</span>
        </div>
      </div>

      <div class="rightBar font" v-if="invoiceKindCode == '01'">
        第一联
        <br />&nbsp;&nbsp;&nbsp;:发票联 <br />︵ <br />购买方记账凭证 <br />︶
      </div>

      <div class="bottomBar" v-if="!alertBoxShow">
        <div class="font">收款人:</div>
        <div class="font2">{{ tickinfo.receiver }}</div>
        <div class="font">复核人:</div>
        <div class="font2">{{ tickinfo.reviewer }}</div>
        <div class="font">开票人:</div>
        <div class="font2">{{ tickinfo.drawer }}</div>
        <div class="font">销售方:(章)</div>
      </div>
      <div class="table">
        <div style="height:83.77777777777777px;">
          <span style="width:3.885%;" class="a font">购买方</span>
          <span style="width:53.462%;">
            <div class="c font">
              <div>名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:</div>
              <div>纳税人识别号:</div>
              <div>地&nbsp;&nbsp;址、电&nbsp;&nbsp;话:</div>
              <div>开户行及账号:</div>
            </div>
            <div class="d font2">
              <div>{{ tickinfo.buyerName }}</div>
              <div>{{ tickinfo.buyerTaxNo }}</div>
              <div>{{ tickinfo.buyerTel }}</div>
              <div>{{ tickinfo.buyerAddress }}</div>
            </div>
          </span>
          <span style="width:2.543%;" class="b font">密码区</span>
          <span style="width:40.11%; padding: 0.037037037037037035rem6.444444444444444px;" class="font2">{{ tickinfo.passwordArea }}</span>
        </div>

        <div style="height:166.9111111111111px;" class="middle middle1" v-if="invoiceKindCode != 14">
          <span style="width:26%;">
            <div>货物或应税劳务、服务名称</div>
            <div v-if="!showDeatilButton">
              <template v-for="(v, i) in tickinfo.detail">
                <div class="thediv" :key="i" :title="v.goodsName">{{ v.goodsName }}</div>
              </template>
            </div>
            <div v-if="showDeatilButton">
              <a href="javaScript:void(0);" style="text-decoration:none;" id="alertInfoA"  @click="alertBoxShow = true">详见销货清单</a>
            </div>
            <div>合计</div>
          </span>
          <span style="width:12.75%;">
            <div>规格型号</div>
            <div v-if="!showDeatilButton">
              <template v-for="(v, i) in tickinfo.detail" >
                <div class="thediv" :key="i" :title="v.model">{{ v.model?v.model:'无' }}</div>
              </template>
            </div>
          </span>
          <span style="width:6.25%;">
            <div>单位</div>
            <div v-if="!showDeatilButton">
              <template v-for="(v, i) in tickinfo.detail">
                <div class="thediv" :key="i" v-if="v.unit" :title="v.unit">{{ v.unit }}</div>
                <div :key="i" v-else>&nbsp;</div>
              </template>
            </div>
          </span>
          <span style="width:9.88%;">
            <div>数&nbsp;&nbsp;&nbsp;量</div>
            <div v-if="!showDeatilButton">
              <template v-for="(v, i) in tickinfo.detail">
                <div class="thediv" :key="i" v-if="v.num" :title="v.num">{{ v.num }}</div>
                <div :key="i" v-else>&nbsp;</div>
              </template>
            </div>
          </span>
          <span style="width:10.13%;">
            <div>单&nbsp;&nbsp;&nbsp;价</div>
            <div v-if="!showDeatilButton">
              <template v-for="(v, i) in tickinfo.detail">
                <div class="thediv" :key="i" v-if="v.unitPrice" :title="v.unitPrice">{{ toDecimal2(v.unitPrice) }}</div>
                <div :key="i" v-else>&nbsp;</div>
              </template>
            </div>
          </span>
          <span style="width:15.07%;">
            <div>金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额</div>
            <div v-if="!showDeatilButton">
              <template v-for="(v, i) in tickinfo.detail">
                <div class="thediv" :key="i" v-if="v.noTaxAmount" :title="v.noTaxAmount">{{ toDecimal2(v.noTaxAmount) }}</div>
                <div :key="i" v-else>&nbsp;</div>
              </template>
            </div>
            <div v-else>{{toDecimal2(tickinfo.invoiceAmount)}}</div>
            <div>￥{{ toDecimal2(tickinfo.invoiceAmount) }}</div>
          </span>
          <span style="width:5.52%;">
            <div>税率</div>
            <div v-if="!showDeatilButton">
              <template v-for="(v, i) in tickinfo.detail">
                <div class="thediv" :key="i" :title="v.taxRate">{{ (v.taxRate&&v.taxRate!='0%')?v.taxRate:'*' }}</div>
              </template>
            </div>
            <div v-else>{{(tickinfo.detail[0].taxRate&&tickinfo.detail[0].taxRate!='0%')?tickinfo.detail[0].taxRate:'*'}}</div>
          </span>
          <span style="width:14.4%;">
            <div>税&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额</div>
            <div v-if="!showDeatilButton">
              <template v-for="(v, i) in tickinfo.detail" >
                <div class="thediv" :key="i" :title="v.taxAmount">{{ (v.taxRate&&v.taxRate!='0%')?(v.taxAmount?toDecimal2(v.taxAmount):((v.taxRate==='免税'||v.taxRate.indexOf('*')>-1)?'***':'')) : '*' }}</div>
              </template>
            </div>
            <div v-else>{{toDecimal2(tickinfo.taxAmount)}}</div>
            <div>￥{{ toDecimal2(tickinfo.taxAmount) }}</div>
          </span>
        </div>

        <!-- 通行费 -->
        <div style="height:166.9111111111111px;" class="middle" v-if="invoiceKindCode == 14">
          <span style="width:26%;">
            <div>项目名称</div>
            <template v-for="(v, i) in tickinfo.detail">
              <div class="thediv" :key="i" :title="v.goodsName">{{ v.goodsName }}</div>
            </template>
            <div v-if="showDeatilButton">
              <a href="javaScript:void(0);" style="text-decoration:none;" id="alertInfoA"  @click="alertBoxShow = true">详见销货清单</a>
            </div>
            <div>合计</div>
          </span>
          <span style="width:12.75%;">
            <div>车牌号</div>
            <template v-for="(v, i) in tickinfo.detail">
              <div class="thediv" :key="i" :title="v.plateNo">{{ v.plateNo }}</div>
            </template>
          </span>
          <span style="width:6.25%;">
            <div>类型</div>
            <template v-for="(v, i) in tickinfo.detail">
              <div class="thediv" :key="i" :title="v.type">{{ v.type }}</div>
            </template>
          </span>
          <span style="width:9.88%;">
            <div>通行日期起</div>
            <template v-for="(v, i) in tickinfo.detail">
              <div :key="i">{{ v.trafficDateStart }}</div>
            </template>
          </span>
          <span style="width:10.13%;">
            <div>通行日期止</div>
            <template v-for="(v, i) in tickinfo.detail">
              <div :key="i">{{ v.trafficDateEnd }}</div>
            </template>
          </span>
          <span style="width:15.07%;">
            <div>金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额</div>
            <template v-for="(v, i) in tickinfo.detail">
              <div class="thediv" :key="i" :title="v.noTaxAmount">{{ toDecimal2(v.noTaxAmount) }}</div>
            </template>
            <div>￥{{ toDecimal2(tickinfo.invoiceAmount) }}</div>
          </span>
          <span style="width:5.52%;">
            <div>税率</div>
            <template v-for="(v, i) in tickinfo.detail">
              <div class="thediv" :key="i" :title="v.taxRate">{{ (v.taxRate&&v.taxRate!='0%')?v.taxRate:'*' }}</div>
            </template>
          </span>
          <span style="width:14.4%;">
            <div>税&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额</div>
            <template v-for="(v, i) in tickinfo.detail">
              <div class="thediv" :key="i" :title="v.taxAmount">{{ (v.taxRate&&v.taxRate!='0%')?(v.taxAmount?toDecimal2(v.taxAmount):((v.taxRate==='免税'||v.taxRate.indexOf('*')>-1)?'***':'')):'*' }}</div>
            </template>
            <div>￥{{ toDecimal2(tickinfo.taxAmount) }}</div>
          </span>
        </div>

        <div class="middle2">
          <span style="width:26%;" class="font jshj">价税合计(大写)</span>
          <span style="width:74%;">
            <div class="font2">{{ Arabia_To_chinese(tickinfo.totalAmount) }}</div>
            <div class="font2">￥{{ toDecimal2(tickinfo.totalAmount) }}</div>
            <div class="font">(小写)</div>
          </span>
        </div>
        <div class="bottom">
          <span style="width:3.885%;" class="a font">销售方</span>
          <span style="width:53.462%;">
            <div class="c font">
              <div>名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:</div>
              <div>纳税人识别号:</div>
              <div>地&nbsp;&nbsp;址、电&nbsp;&nbsp;话:</div>
              <div>开户行及账号:</div>
            </div>
            <div class="d font2">
              <div>{{ tickinfo.salerName }}</div>
              <div>{{ tickinfo.salerTaxNo }}</div>
              <div>{{ tickinfo.salerTel }}</div>
              <div>{{ tickinfo.salerAddress }}</div>
            </div>
          </span>
          <span style="width:2.543%;" class="b2 font">备注</span>
          <span style="width:40.11%; padding: 0.037037037037037035rem6.444444444444444px;" class="font2" v-html="tickinfo.remark"></span>
        </div>
      </div>

      <!--详细信息-->
      <div class="table" v-if="alertBoxShow">
        <div id="alertBox" class="middle" v-if="invoiceKindCode != 14">
          <!-- 上层 -->
          <div class="detailTitle">
            <span style="width:25%;">货物或应税劳务、服务名称</span>
            <span style="width:11.75%;">规格型号</span>
            <span style="width:8.25%;">单位</span>
            <span style="width:9.88%;">数&nbsp;&nbsp;&nbsp;量</span>
            <span style="width:10.13%;">单&nbsp;&nbsp;&nbsp;价</span>
            <span style="width:15.07%;">金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额</span>
            <span style="width:5.52%;">税率</span>
            <span style="width:14.4%;">税&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额</span>
          </div>
          <!-- 中层 -->
          <div id="alertBoxMid">
            <div v-for="(v, i) in tickinfo.detail" :key="i" >
              <span style="width: 25%;">{{ v.goodsName }}</span>
              <span style="width: 11.75%;">{{ v.model?v.model:'无' }}</span>
              <span style="width: 8.25%;">{{ v.unit }}</span>
              <span style="width: 9.88%;">{{ v.num }}</span>
              <span style="width: 10.13%;">{{ toDecimal2(v.unitPrice) }}</span>
              <span style="width: 15.07%;">{{ toDecimal2(v.noTaxAmount) }}</span>
              <span style="width: 5.52%;">{{ (v.taxRate&&v.taxRate!='0%')?v.taxRate:'*' }}</span>
              <span style="width: 14.4%;">{{ (v.taxRate&&v.taxRate!='0%')?(v.taxAmount?toDecimal2(v.taxAmount):((v.taxRate==='免税'||v.taxRate.indexOf('*')>-1)?'***':'')) : '*' }}</span>
            </div>
          </div>
          <!-- 中层纵向线 -->
          <div id="alertBoxMidLine">
            <span style="width:25%;"></span>
            <span style="width:11.75%;"></span>
            <span style="width:8.25%;"></span>
            <span style="width:9.88%;"></span>
            <span style="width:10.13%;"></span>
            <span style="width:15.07%;"></span>
            <span style="width:5.52%;"></span>
            <span style="width:14.4%;"></span>
          </div>
          <!-- 下层 -->
          <div id="alertBoxBottom">
            <span style="width:25%;">
              <div>合计</div>
            </span>
            <span style="width:11.75%;">
              <div>&nbsp;</div>
            </span>
            <span style="width:8.25%;">
              <div>&nbsp;</div>
            </span>
            <span style="width:9.88%;">
              <div>&nbsp;</div>
            </span>
            <span style="width:10.13%;">
              <div>&nbsp;</div>
            </span>
            <span style="width:15.07%;">
              <div>￥{{ toDecimal2(tickinfo.invoiceAmount) }}</div>
            </span>
            <span style="width:5.52%;">
              <div>&nbsp;</div>
            </span>
            <span style="width:14.4%;">
              <div>￥{{ toDecimal2(tickinfo.taxAmount) }}</div>
            </span>
          </div>
          <!-- 结束	-->
          <div id="alertDetailReturn">
            <a href="javaScript:void(0);" class="no-print" @click="alertBoxShow = false">返&nbsp;回</a>
          </div>
        </div>
        <div id="alertBox" class="middle" v-if="invoiceKindCode == 14">
          <!-- 上层 -->
          <div class="detailTitle">
            <span style="width:25%;">项目名称</span>
            <span style="width:11.75%;">车牌号</span>
            <span style="width:8.25%;">类型</span>
            <span style="width:9.88%;">通行日期起</span>
            <span style="width:10.13%;">通行日期止</span>
            <span style="width:15.07%;">金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额</span>
            <span style="width:5.52%;">税率</span>
            <span style="width:14.4%;">税&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额</span>
          </div>
          <!-- 中层 -->
          <div id="alertBoxMid">
            <div v-for="(v, i) in tickinfo.detail" :key="i" >
              <span style="width: 25%;">{{ v.goodsName }}</span>
              <span style="width: 11.75%;">{{ v.cph }}</span>
              <span style="width: 8.25%;">{{ v.lx }}</span>
              <span style="width: 9.88%;">{{ v.txrqq }}</span>
              <span style="width: 10.13%;">{{ v.txrqz }}</span>
              <span style="width: 15.07%;">{{ toDecimal2(v.detailAmount) }}</span>
              <span style="width: 5.52%;">{{ (v.taxRate&&v.taxRate!='0%')?v.taxRate:'*' }}</span>
              <span style="width: 14.4%;">{{ (v.taxRate&&v.taxRate!='0%')?(v.taxAmount?toDecimal2(v.taxAmount):((v.taxRate==='免税'||v.taxRate.indexOf('*')>-1)?'***':'')):'*' }}</span>
            </div>
          </div>
          <!-- 中层纵向线 -->
          <div id="alertBoxMidLine">
            <span style="width:25%;"></span>
            <span style="width:11.75%;"></span>
            <span style="width:8.25%;"></span>
            <span style="width:9.88%;"></span>
            <span style="width:10.13%;"></span>
            <span style="width:15.07%;"></span>
            <span style="width:5.52%;"></span>
            <span style="width:14.4%;"></span>
          </div>
          <!-- 下层 -->
          <div id="alertBoxBottom">
            <span style="width:25%;">
              <div>合计</div>
            </span>
            <span style="width:11.75%;">
              <div>&nbsp;</div>
            </span>
            <span style="width:8.25%;">
              <div>&nbsp;</div>
            </span>
            <span style="width:9.88%;">
              <div>&nbsp;</div>
            </span>
            <span style="width:10.13%;">
              <div>&nbsp;</div>
            </span>
            <span style="width:15.07%;">
              <div>￥{{ toDecimal2(tickinfo.invoiceAmount) }}</div>
            </span>
            <span style="width:5.52%;">
              <div>&nbsp;</div>
            </span>
            <span style="width:14.4%;">
              <div>￥{{ toDecimal2(tickinfo.taxAmount) }}</div>
            </span>
          </div>
          <!-- 结束	-->
          <div id="alertDetailReturn">
            <a href="javaScript:void(0);" class="no-print" @click="alertBoxShow = false">返&nbsp;回</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery';
import QRCode from 'qrcode';
import 'jquery.nicescroll';
import popdata from "./common";
export default {
  mixins: [popdata],
  data() {
    return {
      showDeatilButton: false,        // 是否显示详细信息按钮
      alertBoxShow: false,            // 是否显示详情明细
      fplxmc: '',                     //发票类型名称
      isDzfp: false,                  //是否为电子发票
      invoiceKindCode: '0',
      info: this.detailinfo || []
    };
  },
  props: {
    ticktype: {
      type: String,
      default: null
    },
    tickinfo: {
      default: null
    },
    detailinfo: {
      default: null
    }
  },
  mounted() {
    this.putData(this.ticktype);
  },
  methods: {
    putData: function(type) {
      this.alertBoxShow = false;
      if (type == '1' || type == '01') {
        this.invoiceKindCode = '01';
      } else if (type == '04' || type == '4') {
        this.invoiceKindCode = '04';
      } else if (type == '10') {
        this.invoiceKindCode = '10';
      } else if (type == '14') {
        this.invoiceKindCode = '14';
      }
      this.showDeatilButton = false;

      //如果详细内容大于8条
      this.$nextTick(() => {
        if (this.tickinfo.detail && this.tickinfo.detail.length > 8) {
          this.info = [];
          this.showDeatilButton = true;
        } else {
          this.showDeatilButton = false;
        }
      })

      //设置样式
      if (this.invoiceKindCode == '01') {
        this.fplxmc = '增值税专用发票';
        this.isDzfp = false;
      } else if (this.invoiceKindCode == '10' || this.invoiceKindCode == '14') {
        this.fplxmc = '增值税电子普通发票';
        this.isDzfp = true;
      } else if (this.invoiceKindCode == '04') {
        this.fplxmc = '增值税普通发票';
        this.isDzfp = false;
      }
      this.createQR(); //生成二维码
    },
    createQR: function() {
      var qrInfo = this.QRtextCreate(this.tickinfo);
      var qrimg000 = document.getElementById('qrimg000');
      QRCode.toCanvas(qrimg000, qrInfo,{width:62,height:62,margin:0}, function(error) {
        console.log(error);
        if (error) {
          console.error(error);
        } else {
          console.log('QRCode success!');
        }
      });
    }
  },
  computed: {
    getJym: function() {
      if (this.tickinfo.verifyCode && this.tickinfo.verifyCode != null) {
        return this.tickinfo.verifyCode.replace(/\s/g, '').replace(/(.{4})/g, '$1 ');
      }
      return '';
    }
  },
  watch: {
    tickinfo: function() {
      this.putData(this.ticktype);
    },
    ticktype: function() {
      this.putData(this.ticktype);
    },
    detailinfo: function() {
      this.putData(this.ticktype);
    }
  }
};
</script>

<style lang='scss'>
$color1: #904e31;
$color2: #4a5ee5;
@font-face {
  font-family: 'BT2';
  src: url('BT2.ttf');
}
#shell {
  * {
    font-family:'STZhongsong';
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  position: relative;
  width: 100%;
  height: 532.9555555555555px;
  transform: rotate(0deg);
  // 二维码
  .ewm {
    position: absolute;
    left: 28px;
    top: 47.3px;
    #jqbh {
      font-size: 12.244444444444444px;
      font-family: 'NSimSun';
      color: $color2;
      display: inline-block;
      float: left;
      margin-top: 35.44444444444445px;
      margin-left: 6.444444444444444px;
      div {
        &:last-child {
          letter-spacing: 1.2888888888888888px;
          margin-top: 6.444444444444444px;
        }
      }
    }
    #qrimg {
      display: block;
      height: 62px;
      width: 62px;
      float: left;
      canvas {
        width: 100% !important;
        height: 100% !important;
      }
    }
  }
  // 顶栏-title
  .title {
    position: absolute;
    text-align: center;
    margin-top: 25.13333333333333px;
    margin-left: 50%;
    transform: translateX(-50%);
    .titleTop {
      font-family: 'STKaiti';
      font-size: 24.488888888888887px;
      letter-spacing: 2.2555555555555555px;
      margin-left: 6.444444444444444px;
      margin-right: 6.444444444444444px;
      height: 31px;
    }
    .titleBottom {
      font-family: 'STKaiti';
      font-size: 26.01622222222222px;
      margin-top: 8.700000000000001px;
    }
    .hx1 {
      border: 0.6444444444444444px solid $color1;
      margin-top: 16.433333333333334px;
      margin-bottom: 3.222222222222222px;
    }
    .hx2 {
      border: 0.6444444444444444px solid $color1;
      margin-top: 0px;
    }
    .yz {
      position: absolute;
      top: 2.9px;
      left: 50%;
      transform: translateX(-50%);
      height: 81.19999999999999px;
      z-index: -10;
      opacity: 0.8;
    }
    .color1 {
      color: $color1;
    }
  }
  // 顶栏-info
  .topInfo {
    .fpdm {
      position: absolute;
      top: 42.855555555555554px;
      left: 111.48888888888888px;
      font-size: 23.522222222222222px;
      font-family: 'SimSun';
    }
    .fphm {
      position: absolute;
      top: 36.411111111111104px;
      left: 574.8444444444444px;
      div {
        font-size: 23.522222222222222px;
        margin-left: 8.700000000000001px;
        font-family: 'BT2';
        line-height: 32.22222222222222px;
        color: $color2;
        display: inline-block;
        float: left;
        letter-spacing: -0.9666666666666666px;
        padding-top: 1.2888888888888888px;
      }
      img {
        float: left;
      }
    }
    .numbers {
      color: $color2;
      position: absolute;
      left: 738.211111111111px;
      top: 47.36666666666666px;
      div {
        &:first-child {
          font-size: 12.176777777777778px;
        }
        &:last-child {
          font-size: 13.427px;
          font-weight: 700;
        }
      }
    }
    .date {
      position: absolute;
      top: 88.28888888888889px;
      left: 600.6222222222221px;
      div {
        &:first-child {
          color: $color1;
          letter-spacing: 1.2888888888888888px;
          display: inline-block;
          font-size: 15.144444444444442px;
          font-family: 'STKaiti';
        }
        &:last-child {
          color: $color2;
          margin-left: 2.2555555555555555px;
          display: inline-block;
          font-family: 'STZhongsong';
          font-size: 15.144444444444442px;
        }
      }
    }
  }
}

#shell .table :nth-child(n) {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
#shell .table {
  position: absolute;
  top: 126.64444444444445px;
  left: 27.066666666666663px;
  width: 796px;
  height: 371.2px;
  border-left: 1px solid #904e31;
  border-top: 1px solid #904e31;
}
#shell .table > div {
  width: 100%;
}
#shell .table div span {
  border-right: 1px solid #904e31;
  border-bottom: 1px solid #904e31;
  display: block;
  float: left;
  height: 100%;
  word-wrap: break-word;
}
#shell .font2 {
  color: $color2;
  font-family: 'STZhongsong';
  font-size: 12.244444444444444px;
}
#shell .font,
.table .font :nth-child(n) {
  font-family: 'STKaiti' !important;
  font-size: 13.533333333333331px !important;
  color: $color1;
}
#shell .table .a {
  line-height: 24.166666666666664px;
  padding-top: 4.511111111111111px;
  padding-left: 6.122222222222222px;
}
#shell .table .b {
  line-height: 24.166666666666664px;
  padding-top: 4.511111111111111px;
  padding-left: 1.9333333333333331px;
}
#shell .table .c {
  float: left;
  padding-top: 2px;
}
#shell .table .c div {
  margin-left: 6.444444444444444px;
  line-height: 20px;
  text-align: justify;
  width: 96.66666666666666px;
}
#shell .table .d {
  position: absolute;
  left: 130.5px;
  margin-top: 1.611111111111111px;
  float: left;
  line-height: 20.62222222222222px;
}
#shell .table .d div {
  height: 20px;
  font-size: 11.277777777777777px;
  letter-spacing: 0.6444444444444444px;
}
#shell .table .middle span {
  position: relative;
}
#shell .table .middle > span > div:first-child {
  text-align: center;
  font-family: 'STKaiti';
  font-size: 13.533333333333331px;
  color: $color1;
}
#shell .table .middle > span > div:not(:first-child) {
  font-family: 'STZhongsong';
  font-size: 11.277777777777777px;
  color: $color2;
  text-align: right;
  margin-right: 4.833333333333333px;
}
#shell .table .middle > span:nth-child(1) > div:not(:first-child),
.table .middle > span:nth-child(2) > div:not(:first-child) {
  font-family: 'STZhongsong';
  font-size: 11.277777777777777px;
  color: $color2;
  text-align: left;
  margin-left: 4.833333333333333px;
}
#shell .table .middle > span:nth-child(1) > div:last-child,
.table .middle > span:nth-child(6) > div:last-child,
.table .middle > span:nth-child(8) > div:last-child {
  text-align: right;
  width: 95%;
  position: absolute;
  bottom: 1.611111111111111px;
}
#shell .table .middle > span:nth-child(1) > div:last-child {
  letter-spacing: 48.33333333333333px;
  padding-left: 48.33333333333333px;
  width: 95%;
  text-align: center;
  font-family: 'STKaiti';
  font-size: 13.533333333333331px;
  color: $color1;
}
#shell .middle2 div,
.middle2 span {
  line-height: 30.611111111111107px;
}
#shell .middle2 .jshj {
  width: 90%;
  text-align: center;
  letter-spacing: 3.222222222222222px;
}
#shell .middle2 {
  height: 32.22222222222222px;
}
#shell .middle2 > span:nth-child(2) > div:nth-child(1) {
  float: left;
  margin-left: 16.11111111111111px;
}
#shell .middle2 > span:nth-child(2) > div:nth-child(3) {
  letter-spacing: 2.5777777777777775px;
  float: right;
}
#shell .middle2 > span:nth-child(2) > div:nth-child(2) {
  float: right;
  margin-right: 64.44444444444444px;
}
#shell .table .bottom {
  height: 88.6111111111111px;
}
#shell .bottom .b2 {
  line-height: 35.44444444444445px;
  padding-top: 9.022222222222222px;
  padding-left: 2.9px;
}

#shell .rightBar {
  width: 14.5px;
  position: absolute;
  top: 156.6px;
  right: 0;
}
#shell .bottomBar {
  position: absolute;
  left: 32.22222222222222px;
  top: auto;
  bottom: 10px;
}
#shell .bottomBar > div {
  display: inline-block;
}
#shell .bottomBar > div:nth-child(even) {
  margin-right: 96.66666666666666px;
}
#shell .bottomBar > div:nth-child(odd) {
  margin-right: 3.222222222222222px;
  letter-spacing: 3.222222222222222px;
}

#shell .dzfp {
  position: absolute;
  top: 33px;
  left: 596.1111111111111px;
}
#shell .dzfp div {
  line-height: 20px;
}
#shell .dzfp span:first-child {
  font-family: 'STKaiti';
  font-size: 13.533333333333331px;
  color: $color1;
}
#shell .dzfp span:last-child {
  padding-left: 6.444444444444444px;
  font-family: 'STZhongsong';
  font-size: 12px;
  color: $color2;
}
#shell .jym {
  position: absolute;
  top: 90.22222222222221px;
  left: 112.77777777777777px;
}
#shell .jym > span:first-child {
  font-family: 'STKaiti';
  font-size: 13.533333333333331px;
  color: $color1;
}
#shell .jym > span:last-child {
  padding-left: 6.444444444444444px;
  padding-left: 6.444444444444444px;
  font-family: 'STZhongsong';
  font-size: 13.533333333333331px;
  color: $color2;
}
#shell .txf {
  position: absolute;
  top: 48.33333333333333px;
  left: 112.77777777777777px;
  font-size: 22.555555555555554px;
  font-weight: 700;
  color: $color2;
}

#alertInfoA {
  font-size: 13.533333333333331px;
  font-family: 'STKaiti';
  line-height: 26.099999999999998px;
  color: #1073EE;
  cursor: pointer;
}
#alertBox {
  border-left: 1px solid #904e31;
  border-top: 1px solid #904e31;
  position: absolute;
  top: -116px;
  left: -17.400000000000002px;
  width: 822.15px !important;
  height: 490px;
  background: #fff;
  .detailTitle {
    width: 100%;
    border-right: 1px solid #904e31;
    border-bottom: none;
    display: block;
    height: 20px;
    float: left;
    text-align: center;
    display: flex;
    &:nth-last-child(1) {
      border-right: none;
    }
    span {
      font-family: 'STKaiti';
      font-size: 13.533333333333331px;
      color: $color1;
      border-right: none !important;
    }
  }
  #alertBoxMid {
    width: 100%;
    height: 446px;
    overflow: auto;
    display: inline-block;
    &>div {
      display: flex;
      width: 100%;
      word-break: break-all;
      font-family: 'STZhongsong';
      font-size: 11.277777777777777px;
      color: $color2;
      text-align: right;
      span {
        height: auto;
        padding: 4px;
        display: inline-block;
        line-height: 14px;
        border-right: none;
        border-bottom: none;
      }
    }
    &::-webkit-scrollbar {
      width: 5px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #f90;
      background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
      );
    }
  }
   #alertBoxMidLine {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
  }
}

#alertBoxBottom {
  display: block;
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: auto;
  span {
    border-right: 1px solid #904e31;
    border-bottom: none !important;
    display: block;
    padding: 0 4px !important;
    &> div {
      font-family: 'STZhongsong';
      font-size: 11.277777777777777px;
      color: $color2;
      text-align: right;
      margin-right: 4.833333333333333px;
    }
    &:first-child {
      &> div {
        letter-spacing: 48.33333333333333px;
        padding-left: 48.33333333333333px;
        width: 95%;
        font-family: 'STKaiti';
        font-size: 13.533333333333331px;
        color: $color1;
      }
    }
  }
}
#alertDetailReturn {
  background-color: #fff;
  position: absolute;
  top: 490px;
  width: 100%;
  height: 26.099999999999998px;
  line-height: 26.099999999999998px;
  text-align: center;
  &>a {
    font-size: 16px;
    text-decoration: none;
    font-family: 'STKaiti';
    color: #4a5ee5;
  }
}

/* ˮӡ */
.shuiyin {
  width: 100%;
  text-align: center;
  top: 43%;
  left: 40px;
  position: absolute;
  opacity: 0.9;
}

.middle div {
  word-wrap: break-word;
}
.thediv {
  height: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.middle1>span .thediv, .middle>span .thediv {
  display: inherit;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 清单 */
#shell {
  &.shellList {
    background: #fff;
    height: auto;
    position: static;
    width: 100%;
    padding: 0 36px 39px 27.066666666666663px;
    margin-top: 8px;
    .listTitle {
      color: #9E520A;
      font-size: 28px;
      line-height: 40px;
      padding: 16px 0 21px;
      text-align: center;
    }
    .table {
      position: static;
      margin-top: 0;
      width: 100%;
      min-height: 384px;
      height: auto;
      border: 1px solid #904e31;
      padding-bottom: 0;
      .middle span {
        padding-bottom: 172px;
      }
    }
  }
}
</style>
